<template>
    <div class="recordWrapper">
        <div class="recordLeft">
            <div class="msgTop">
                <div class="topLeft">
                    <el-tabs v-model="activeName">
                        <el-tab-pane :label="'全部' + '(' + this.total + ')'" name="1">

                        </el-tab-pane>
                        <el-tab-pane :label="'未读' + '(' + this.total2 + ')'" name="2"></el-tab-pane>
                    </el-tabs>
                </div>
                <div class="topRight">
                    <el-button v-if="activeName === '2' && this.msgData2.length !== 0" @click="handleRead"
                        type="text">全部已读</el-button>
                    <el-button @click="handleBatch" type="text">批量删除</el-button>
                    <!-- <el-button v-if="isManage===false" @click="handleBatch" type="text">批量管理</el-button>

                    <el-button v-if="isManage" type="text">删除</el-button>
                    <el-button v-if="isManage" @click="handleCancel" type="text">取消</el-button>
                    <span></span> -->
                </div>
            </div>
            <!-- 全部 -->
            <div v-if="activeName === '1'">
                <div class="msgList">
                    <div class="itemNone" v-if="msgData.length == 0">
                        <p>目前暂无数据</p>
                    </div>
                    <ul v-else>
                        <li v-for="item in msgData" :key="item.id">
                            <!-- {{item}} -->
                            <el-checkbox class="selectCheck" v-model="item.checked"></el-checkbox>
                            <img src="@/assets/images/msg1.png" alt="">
                            <div class="contentRight">
                                <h3>
                                    {{ item.newsContent }}
                                </h3>
                                <div class="msgDesc">
                                    <span v-if="item.newsType === '0'">系统消息</span>
                                    <span v-if="item.newsType === '1'">普通消息提醒</span>
                                    <span v-if="item.newsType === '2'">订阅消息</span>
                                    <span v-if="item.newsType === '3'">金融产品的申请列表</span>
                                    <span v-if="item.newsType === '4'">金融产品审核列表</span>
                                    <span v-if="item.newsType === '5'">活动的申请列表</span>
                                    <span v-if="item.newsType === '6'">活动审核列表</span>
                                    <span v-if="item.newsType === '7'">场馆的申请列表</span>
                                    <span v-if="item.newsType === '8'">场馆的审核</span>
                                    <span v-if="item.newsType === '9'">包间申请</span>
                                    <span v-if="item.newsType === '10'">包间审核</span>
                                    <span v-if="item.newsType === '11'">会议室申请</span>
                                    <span v-if="item.newsType === '12'">会议室审核</span>
                                    <span v-if="item.newsType === '13'">访客预约申请</span>
                                    <span v-if="item.newsType === '14'">访客预约审核</span>
                                    <span v-if="item.newsType === '15'">报事报修申请</span>
                                    <span v-if="item.newsType === '16'">报事报修的审核</span>
                                    <span v-if="item.newsType === '17'">报事报修指派</span>
                                    <span v-if="item.newsType === '18'">报事报修维修完成</span>
                                    <span v-if="item.newsType === '19'">物资放行申请</span>
                                    <span v-if="item.newsType === '20'">物资放行审核</span>
                                    <span v-if="item.newsType === '21'">装修申请</span>
                                    <span v-if="item.newsType === '22'">装修审核</span>
                                    <span v-if="item.newsType === '23'">商务用车申请</span>
                                    <span v-if="item.newsType === '24'">商务用车审核</span>
                                    <span v-if="item.newsType === '25'">停车场申请</span>
                                    <span v-if="item.newsType === '26'">停车场审核</span>
                                    <span v-if="item.newsType === '27'">任务中心提醒</span>
                                    <span v-if="item.newsType === '28'">预约看房审核通过</span>
                                    <span v-if="item.newsType === '29'">预约看房审核驳回</span>
                                    <span v-if="item.newsType === '30'">预约看房指派通知</span>
                                    <span v-if="item.newsType === '31'">机构实名认证提交</span>
                                    <span v-if="item.newsType === '32'">机构实名认证审核结果通知</span>
                                    <span v-if="item.newsType === '33'">员工注册账号通知企业审核</span>
                                    <span v-if="item.newsType === '34'">机构审核员工账号通知</span>
                                    <span v-if="item.newsType === '35'">新的租赁需求通知</span>
                                    <span v-if="item.newsType === '36'">账单推送提醒</span>
                                    <span v-if="item.newsType === '37'">账单审核结果通知</span>
                                    <span v-if="item.newsType === '38'">新增合同通知</span>
                                    <span v-if="item.newsType === '39'">兑现申请通知</span>
                                    <span v-if="item.newsType === '40'">兑现审核结果通知</span>
                                    <span v-if="item.newsType === '41'">行业资讯审核</span>

                                    <span v-if="item.newsType === '42'">方素征集</span>
                                    <span v-if="item.newsType === '43'">方案投稿</span>
                                    <span v-if="item.newsType === '44'">方案投稿审核</span>
                                    <span v-if="item.newsType === '45'">方素文章亩核</span>
                                    <span v-if="item.newsType === '46'">资源发布审核</span>
                                    <span v-if="item.newsType === '47'">用户加入联合体亩核,</span>
                                    <span v-if="item.newsType === '48'">课题组审核</span>
                                    <span v-if="item.newsType === '49'">产教联合体-供需对接审核</span>
                                    <span v-if="item.newsType === '50'">课题组报名审核</span>
                                    <span v-if="item.newsType === '51'">专家审核通知</span>

                                    <el-divider direction="vertical"></el-divider>
                                    <span>{{ item.createTime }}</span>
                                    <span class="lookDetail" @click="handleDetail(item)">查看详情>></span>
                                    <el-button class="deleteBtn" size="mini" plain type="danger" icon="el-icon-delete"
                                        @click="handleDelete(item.id)" circle></el-button>
                                </div>
                            </div>
                        </li>

                    </ul>
                </div>
                <div class="indexPage">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="params.page" :page-sizes="[5, 10, 15, 20]" :page-size="params.pageSize" background
                        size="mini" layout="total, prev, pager, next, sizes,jumper" :total="total">
                    </el-pagination>
                </div>
            </div>
            <!-- 未读 -->
            <div v-if="activeName === '2'">
                <div class="msgList">
                    <div class="itemNone" v-if="msgData2.length == 0">
                        <p>目前暂无数据</p>
                    </div>
                    <ul v-else>
                        <li v-for="item in msgData2" :key="item.id">
                            <img src="@/assets/images/msg1.png" alt="">
                            <div class="contentRight">
                                <h3>
                                    <!-- <span v-if="item.isNew"></span> -->
                                    {{ item.newsContent }}
                                </h3>
                                <div class="msgDesc">
                                    <span v-if="item.newsType === '0'">系统消息</span>
                                    <span v-if="item.newsType === '1'">普通消息提醒</span>
                                    <span v-if="item.newsType === '2'">订阅消息</span>
                                    <span v-if="item.newsType === '3'">金融产品的申请列表</span>
                                    <span v-if="item.newsType === '4'">金融产品审核列表</span>
                                    <span v-if="item.newsType === '5'">活动的申请列表</span>
                                    <span v-if="item.newsType === '6'">活动审核列表</span>
                                    <span v-if="item.newsType === '7'">场馆的申请列表</span>
                                    <span v-if="item.newsType === '8'">场馆的审核</span>
                                    <span v-if="item.newsType === '9'">包间申请</span>
                                    <span v-if="item.newsType === '10'">包间审核</span>
                                    <span v-if="item.newsType === '11'">会议室申请</span>
                                    <span v-if="item.newsType === '12'">会议室审核</span>
                                    <span v-if="item.newsType === '13'">访客预约申请</span>
                                    <span v-if="item.newsType === '14'">访客预约审核</span>
                                    <span v-if="item.newsType === '15'">报事报修申请</span>
                                    <span v-if="item.newsType === '16'">报事报修的审核</span>
                                    <span v-if="item.newsType === '17'">报事报修指派</span>
                                    <span v-if="item.newsType === '18'">报事报修维修完成</span>
                                    <span v-if="item.newsType === '19'">物资放行申请</span>
                                    <span v-if="item.newsType === '20'">物资放行审核</span>
                                    <span v-if="item.newsType === '21'">装修申请</span>
                                    <span v-if="item.newsType === '22'">装修审核</span>
                                    <span v-if="item.newsType === '23'">商务用车申请</span>
                                    <span v-if="item.newsType === '24'">商务用车审核</span>
                                    <span v-if="item.newsType === '25'">停车场申请</span>
                                    <span v-if="item.newsType === '26'">停车场审核</span>
                                    <span v-if="item.newsType === '27'">任务中心提醒</span>
                                    <span v-if="item.newsType === '28'">预约看房审核通过</span>
                                    <span v-if="item.newsType === '29'">预约看房审核驳回</span>
                                    <span v-if="item.newsType === '30'">预约看房指派通知</span>
                                    <span v-if="item.newsType === '31'">机构实名认证提交</span>
                                    <span v-if="item.newsType === '32'">机构实名认证审核结果通知</span>
                                    <span v-if="item.newsType === '33'">员工注册账号通知企业审核</span>
                                    <span v-if="item.newsType === '34'">机构审核员工账号通知</span>
                                    <span v-if="item.newsType === '35'">新的租赁需求通知</span>
                                    <span v-if="item.newsType === '36'">账单推送提醒</span>
                                    <span v-if="item.newsType === '37'">账单审核结果通知</span>
                                    <span v-if="item.newsType === '38'">新增合同通知</span>

                                    <el-divider direction="vertical"></el-divider>
                                    <span>{{ item.createTime }}</span>
                                    <span class="lookDetail" @click="handleDetail(item)">查看详情>></span>
                                </div>
                            </div>
                        </li>

                    </ul>
                </div>
                <div class="indexPage">
                    <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
                        :current-page="params2.page" :page-sizes="[5, 10, 15, 20]" :page-size="params2.pageSize" background
                        size="mini" layout="total, prev, pager, next, sizes,jumper" :total="total2">
                    </el-pagination>
                </div>
            </div>

        </div>
        <div class="recordRight">
            <h2><span></span>最新资讯</h2>
            <div class="productList">
                <ul>
                    <li v-for="item in contentList" :key="item.id">
                        <div class="msgNew">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px"
                                height="13px">
                                <path fill-rule="evenodd" stroke-width="1px" stroke-linecap="round" stroke-linejoin="round"
                                    fill="none" d="M2.913,1.20 L2.913,10.410 L9.720,5.288 L2.913,1.20 Z" />
                                <path fill-rule="evenodd" d="M0.3,1.20 L0.3,12.498 L7.776,6.236 L0.3,1.20 Z" />
                            </svg>
                            <p :title="item.name" @click="toDetail(item.id)" class="newTitle">{{ item.name }}</p>
                        </div>
                        <p class="newDate">{{ item.updateTime }}</p>
                    </li>

                </ul>
            </div>
        </div>
        <!-- 消息详情 -->
        <MsgDetail @handleUnread="handleUnread" @getMsgList="getMsgList" ref="msgContent" />
    </div>
</template>
<script>
import { getMsgAll, allRead, getMsgDelete, getShishu } from "@/request/api/msg"
// import { timeStamp } from "console"
import MsgDetail from "./msgDetail.vue"
export default {
    components: {
        MsgDetail
    },
    data() {
        return {
            currentPage: 1,
            activeName: '1',
            form: {
                a: '审核中'
            },
            tableData: [],
            contentList: [],

            newData: [
                {
                    newName: "深化新旧动能转换，山东被赋予…",
                    date: "2022-10-27"
                },
                {
                    newName: "10亿 济南金融科技基金成立",
                    date: "2022-10-27"
                },
                {
                    newName: "泉城“金名片”，济南CBD入选…",
                    date: "2022-10-27"
                },
                {
                    newName: "邮政储蓄银行山东省分行首个科…",
                    date: "2022-10-27"
                },
                {
                    newName: "济南高新区九大引才行动",
                    date: "2022-10-27"
                },
                {
                    newName: "济南高新区，比亚迪首车将下线",
                    date: "2022-10-27"
                },
                {
                    newName: "一谷两园！济南高新区将打造中…",
                    date: "2022-10-27"
                },
                {
                    newName: "1+435：济南高新区科创金融建…",
                    date: "2022-10-27"
                },
                {
                    newName: "最高补贴300万，济南初创机构…",
                    date: "2022-10-27"
                },
                {
                    newName: "济南再迎世界级盛会！",
                    date: "2022-10-27"
                },

            ],
            status: '',
            total: 0,
            params: {
                page: 1,
                pageSize: 5,
                ifRead: null
            },
            params2: {
                page: 1,
                pageSize: 5,
                ifRead: null
            },
            params3: {
                page: 1,
                pageSize: 10,
                ifRead: null
            },
            msgData: [],
            isSelectAll: true,
            isSelectUn: false,
            msgData2: [],
            total2: 0,
            isManage: false,
            dataShi: [],
        }
    },
    created() {
        this.getMsgList()
        this.handleUnread()
        this.getShiList()
    },
    methods: {
        // 获取消息列表
        getMsgList() {
            // this.params.ifRead = null
            getMsgAll(this.params).then(res => {
                if (res.data.code === 200) {
                    this.msgData = res.data.result.items
                    this.total = res.data.result.total
                }
            })
        },
        // 获取消息列表
        getShiList() {
            // this.params.ifRead = null
            getShishu(this.params3).then(res => {
                if (res.data.code === 200) {
                    var dataShi = res.data.result.items
                    dataShi.forEach(item => {
                        item.updateTime = item.updateTime.slice(0, 10)
                    })
                    this.contentList = dataShi

                }
            })
        },
        // 全部已读
        handleRead() {
            this.$confirm("确定将所有消息置为已读状态吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                allRead().then(res => {
                    if (res.data.code === 200) {
                        this.$message({
                            message: res.data.message,
                            type: "success",
                        });
                        this.getMsgList()
                        this.handleUnread()
                        this.getShiList()
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
            })
        },
        // 获取未读消息
        handleUnread() {
            this.isSelectAll = false
            this.isSelectUn = true
            this.params2.ifRead = '0'
            getMsgAll(this.params2).then(res => {

                if (res.data.code === 200) {
                    this.msgData2 = res.data.result.items
                    this.total2 = res.data.result.total
                }
            })
        },
        // 查看详情
        toDetail(id) {
            this.$router.push({
                name: "newDetail",
                query: {
                    id,
                },
            });
        },
        handleSizeChange(val) {
            this.params.pageSize = val;
            this.params.page = 1;
            this.getMsgList();
        },
        handleCurrentChange(val) {
            this.params.page = val;
            this.getMsgList();
        },
        handleSizeChange2(val) {
            this.params2.pageSize = val;
            this.params2.page = 1;
            this.handleUnread();
        },
        handleCurrentChange2(val) {
            this.params2.page = val;
            this.handleUnread();
        },
        // 查看详情
        handleDetail(info) {
            this.$refs.msgContent.open(info)
        },
        // // 批量管理
        // handleBatch() {
        //     this.isManage = true
        // },
        // 取消
        handleCancel() {
            this.isManage = false
        },
        // 单个删除操作
        handleDelete(id) {
            this.$confirm("确定删除吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.getResult(id)
            })
        },
        // 批量删除
        handleBatch() {
            let array = []
            this.msgData.forEach(item => {
                if (item.checked) {
                    array.push(item)
                }
            })
            var ids = array.map(item => item.id)
            if (ids.length !== 0) {
                this.$confirm("确定删除吗?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    let idsString=ids.toString()
                    this.getResult(idsString)
                   
                })
            } else {
                this.$message({
                    message: '请至少选择1条数据！',
                    type: "warning",
                });
            }
        },
        // 删除接口
        getResult(id) {
            getMsgDelete(id).then(res => {
                if (res.data.code === 200) {
                    this.$message({
                        message: res.data.message,
                        type: "success",
                    });
                    this.getMsgList() 
                    this.handleUnread()
                    this.getShiList()
                } else {
                    this.$message.error(res.data.message);
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import "./msgCenter.less";
</style>

